<template>
	<view class="order-detail" v-if="!isEmpty">
		<view class="top psr bg-green">
			<image class="bg" :src="$xyfun.image('/static/images/status-bg.png')" mode="widthFix" />
			<view class="status-left flex">
				<image :src="$xyfun.image('/static/images/order-status')+order.status+'.png'" mode="widthFix" v-if="order.status >=0" />
				<image :src="$xyfun.image('/static/images/order-status-close.png')" mode="widthFix" v-else />
				<view class="status-box m-l-20 tc-w">
					<view class="name tb ts-34">
						{{order.status_text}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="flex p-30 m-30 br-10 bg-w ts-26" v-if="order.consignee">
			<view class="yz-iconfont yz-dingwei lh-32"></view>
			<view class="r m-l-15">
				<view class="lh-30"><text>{{order.consignee}}</text><text class="m-l-10">{{order.phone}}</text></view>
				<view class="m-t-20"><text>{{order.city}}</text><text class="m-l-10">{{order.address}}</text></view>
			</view>
		</view>
		<view class="m-t-30 br-10 m-lr-30 m-b-30 bg-w">
			<xyGoodsGrad :item="order"></xyGoodsGrad>
		</view>
		<view class="m-t-30 br-10 m-lr-30 m-b-30 p-20 bg-w ts-26">
			<view class="flex">
				<text>订单编号：</text>
				<text>{{order.order_sn}}</text>
				<text @tap="$xyfun.copy(order.order_sn)" class="ts-26 bl br-10 m-l-25 p-lr-10" :style="'background-color: #f7f7f7;'">复制</text>
			</view>
			<view class="flex m-t-20">
				<text>下单时间：</text>
				<text>{{$xyfun.timeFormat(order.createtime)}}</text>
			</view>
      <view class="flex m-t-20">
        <text>支付方式：</text>
        <text>{{order.pay_type_text}}</text>
      </view>
			<block>
				<view class="flex m-t-20">
					<text>配送方式：</text>
					<text>{{order.delivery_type_text}}</text>
				</view>
			</block>
		</view>
		<view class="m-t-30 br-10 m-lr-30 m-b-30 p-20 bg-w ts-24">
			<view class="flex m-t-20">
				<text>商品金额：</text>
				<view class="m-l-auto tb"><text>¥</text>{{order.total_amount}}</view>
			</view>
			<view class="flex m-t-20">
				<text>订单金额：</text>
				<view class="m-l-auto tb"><text>¥</text>{{order.total_fee}}</view>
			</view>
      <view class="flex m-t-20">
        <text>备注：</text>
        <view class="m-l-auto">{{order.remark}}</view>
      </view>
			<view class="flex m-t-20">
				<view class="m-l-auto tb lh-34">
					<text>实付金额：</text>
					<text class="tc-r">¥</text>
					<text class="ts-34 tc-r">{{order.pay_fee ? order.pay_fee : order.total_fee}}</text>
				</view>
			</view>
		</view>

    <view class="order_act" v-if="order.status==2">
      <view class="but" @tap="takeDelivery">确认收货</view>
    </view>


		<!--物流信息弹窗-->
		<block>
			<view class="xy-modal-box xy-modal-box-center logistics-model-box p-tb-50 p-lr-30 br-10 bg-w" :class="[logisticsModelShow?'xy-modal-show':'']">
				<view class="title m-b-50 ts-32 tb tc">物流信息</view>
				<view class="list m-tb-30 tb">
					<view>承运公司：{{order.delivery_company}}</view>
					<view class="m-t-15">运单号：{{order.delivery_no}}</view>
				</view>
				<view class="traces" style="max-height: 600rpx;overflow: scroll;">
					<view v-for="item in traces" class="m-b-20">
						<view class="m-b-10">{{item.AcceptTime}}</view>
						<view :style="'color:#808080;'">{{item.AcceptStation}}</view>
					</view>
				</view>
			</view>
			<view class="xy-modal-mask" :class="[logisticsModelShow?'xy-mask-show':'']" @tap="logisticsModelShow =!logisticsModelShow"></view>
		</block>

		
	</view>
</template>

<script>
	import { mapState } from 'vuex';
  import xyGoodsGrad from "@/components/xy-order/goods_grad"
	export default {
		components: {
      xyGoodsGrad
		},
		data() {
			return {

				isEmpty:true,
				id: '',
				order:{},
				logisticsModelShow:false,
				traces:[],
				disabled:false,
			}
		},
		computed: {
			...mapState(['common','user'])
		},
		async onLoad() {
			var options = this.$Route.query;
			if(options){
				this.id = options.id;
			}
			this.loadData();
		},
		methods: {
			
			async loadData(){
				var url = '/goods_order/detail';
        this.$api.post({
          url: url,
          loadingTip:'加载中...',
          data: {
            id: this.id,
          },
          success: res => {
            this.isEmpty = false;
            this.order = res;
          }
        });
			},


			// 确认收货
			takeDelivery(){
				this.$api.post({
					url: '/goods_order/take_delivery',
          loadingTip:'...',
					data: {
						id: this.id,
					},
					success: res => {
						this.$xyfun.msg('确认收货成功');
						this.loadData();
					}
				});
			},

      //重新支付
      repay(){
        this.$xyfun.to('/pages/user/order/payresult?orderId='+this.order.id+'&payState=repay&orderType=goods');
      }
		}
	}
</script>

<style>
page{
  background: #ececec;
}
</style>
<style scoped lang="scss">
	.order-detail{
    .bg-green{
      background-color: #00dd83;
    }
		padding-bottom: 150rpx;
		.top{
			.bg{
				width: 750rpx;
			}
			
			.status-left{
				position: absolute;left: 50rpx; top: 40rpx;
				image{width: 120rpx;}
			}
			
			.status-right{
				position: absolute;right: 30rpx;top: 80rpx;
			}
		}
		

		.bottom-fixed{
			.close{width: 220rpx;height: 74rpx;border-radius: 37rpx;line-height: 74rpx;}
			.pay{width: 160rpx;height: 55rpx;border-radius: 37rpx;line-height: 55rpx;font-size: 24rpx;}
		}
		
		.logistics-model-box{
			width: 660rpx;
		}
		
		.pay-model-box{width: 80%;}
		
	}
</style>
